<template>
<div>
    <!-- 轮播 -->
 <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
 
  <van-swipe-item><img src="../assets/img/m_bg2.png" class="msybg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/img/m_bg3.png" class="msybg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/img/m_bg4.png" class="msybg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/img/m-bg5.png" class="msybg" alt=""></van-swipe-item>
</van-swipe>
 <div class="msy_tit">
 序言
 </div>
 <div class="msy_er">
    鄙人不才，见识浅薄。勿欲为造天地之府，不才于至此。妄不敢为，而寻于师焉。望夫子不予鄙人计较已。
 </div>

<div class="msy_list" v-if="cs_show" >
    
     <button class="learn-more" @click="pay">
    <span class="circle" aria-hidden="true">
      <span class="icon arrow"></span>
    </span>
    <span class="button-text">可敢V我50圆子，见识一下实力</span>
  </button>
  <img src="../assets/img/skm.jpg" @click="show=!show" alt="" v-if="show">
</div>
<div class="sy_list_k">
<div class="sy_list" v-for="(item,index) of list" :key="index"> 
<div class="sy_list_zz">
   <div class="sy_item">
    <div class="sy_item_le">时间：</div> 
    <div class="sy_item_re">{{item.time}}</div> 
   </div>    
   <div class="sy_item">
    <div class="sy_item_le">名称：</div> 
    <div class="sy_item_re">{{item.name}}</div> 
   </div>  
   <div class="sy_item ">
    <div class="sy_item_le">技术栈：</div> 
    <div class="sy_item_re">{{item.boos}} </div> 
   </div>  
   <div class="sy_item ">
    <div class="sy_item_le">项目职责：</div> 
    <div class="sy_item_re">{{item.perbol}} </div> 
   </div>  
   

</div>
</div>


<!-- 增高 -->
<div class="zenggao"> </div>
</div>
</div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
export default {
 
  
    data() {
      return {
        show:false,
        cs_show:false,
         list:[]

      };
    },
   
    created() {
      // console.log(this.$store.state.list)
      
      this.list=this.$store.state.list
      // console.log(this.list)
    },
    mounted() {
       
    },
    

    methods:{
    pay(){
        this.show=true
    }
    },
}
</script>

<style scoped lang="scss">
.msybg{
    width: 100%;
    height: 178px;
}
.msy_tit{
    font-size: 18px;
    // margin-top:10px ;
      font-family:"STKaiti";
}
.msy_er{
    width: 90%;
    margin: auto;
    text-indent: 30px;
    font-size: 16px;
    font-family:"STXingkai", Times, serif;
    margin-top:5px ;
    padding-bottom:10px ;
    font-style: italic;
    border-bottom: 1px solid #eee;
    // color: #fff;     //====================================ce
}
.msy_list{
    width: 100%;
    height: 400px;
    // border: 1px solid #000;
    margin-top:20px ;
    
  img{
    // margin-top:10px ;
    margin-bottom:50px ;
    width: 100%;
  }   
  button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
button.learn-more {
  width: 80%;
  height: auto;
  margin: auto;
}
button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #282936;
  border-radius: 1.625rem;
}
button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
button:hover .circle {
  width: 100%;
}
button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
button:hover .button-text {
  color: #fff;
}
}
.sy_list{
  width: 90%;
  margin: auto;
  height: 540px;
  // background: #efefef;
  border-radius:10px ;
  margin-bottom:20px ;
  //  background-image: url('../assets/img/xqq.jpg');
   background-size:cover;
   box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.45);
   overflow: hidden;
   .sy_list_zz{
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(42, 159, 255, 0.2) 0%, #212120aa 60%, #212120 100%);
   color: #efefef;
   }
}

.sy_list_k{
  width: 100%;
  height: calc(100vh - 300px);
  overflow-y:auto ;
}
.sy_list:first-child{
  background-image: url('../assets/img/xqq.jpg');
   background-position: 50% 40%;

}
.sy_list:nth-child(2){
  background-image: url('../assets/img/xqq2.jpg');
   background-position: 30% 40%;
}
.sy_list:nth-child(3){
  background-image: url('../assets/img/xqq3.jpg');
   background-position: 30% 40%;

}
.zenggao{
  width: 100%;
  height: 30px;
}
.sy_item{
  width: 90%;
margin: auto;
display: flex;
padding-top:20px ;
}
.sy_item_le{
  width: 80px;
  text-align: left;
}
.sy_item_re{
  width:calc(100% - 100px);
  text-align: left;
}
</style>
